<template>
  <div id="hello">
    <div id="dbmap">1</div>
    <div id="result">
      <Button custom-icon="iconfont icon-fangkuai2" size="small" type="success" @click="allGps">
        提交覆盖物数据
      </Button>
      <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="clearAll">
        清除覆盖物
      </Button>
	</div>
  </div>

</template>

<script>
// import CoCompanyApi from '@/api/collection/Geographicalfence.js'
import CoCompanyApi from '@/api/mall/Geographicalfence.js'
export default {
  name: 'dbmap',
  props: ['routerData'],
  data () {
    return {
	  id: '',
      map: null,
	  drawingManager: null,
	  overlays: []
    }
  },

  mounted () {
    this.map = new BMap.Map('dbmap', {
      enableMapClick: false // 禁止底图点击事件
    })
    //    this.map.centerAndZoom(new BMap.Point(117.06 ,36.67), 17);
    // this.map.enableScrollWheelZoom();
    // this.map.enableMapClick = false;
    // 图形样式
    var styleOptions = {
      strokeColor: 'red', // 边线颜色。
      fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 3, // 边线的宽度，以像素为单位。
      strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
      fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
      strokeStyle: 'solid' // 边线的样式，solid或dashed。
    }
    this.map.centerAndZoom('杭州', 12)
    // 启用滚轮缩放
    this.map.enableScrollWheelZoom()
    this.map.enableInertialDragging()
    this.map.enableContinuousZoom()

    // 地图加载完成设置最终城市定位
    this.map.addEventListener('tilesloaded', this.finalCityHandler())
    function finalCityHandler () {
	    this.map.removeEventListener('tilesloaded', finalCityHandler)
	    // 定义中心城市
	    if ('杭州' !== '') {
	        this.map.centerAndZoom('杭州', 13)
	    }
    }
    var local = new BMap.LocalSearch(this.map, {
      renderOptions: { map: this.map }
    })
	 // 定义一个控件类,即function
    function ZoomControl () {
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT
	  this.defaultOffset = new BMap.Size(90, 18)
    }

    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control()

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function (map) {
	  // 创建一个DOM元素
	  var div = document.createElement('div')

	  var d = document.createElement('input')
	  d.type = 'text'
	  d.setAttribute('style', 'width:100px;height:23.5px;')
	  var f = document.createElement('input')
	  f.type = 'button'
	  f.value = '搜索'
	  f.style.width = '45px'
	  div.appendChild(d)
	  div.appendChild(f)
	  // 设置样式
	  // 绑定事件,点击一次放大两级
	  f.onclick = function (e) {
        var val = d.value
        if (val) {
          local.search(val)
        }
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div)
	  // 将DOM元素返回
	  return div
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl()
    // 添加到地图当中
    this.map.addControl(myZoomCtrl)

    //     //版权控件
    var cr = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_TOP_LEFT }) // 设置版权控件位置
    // 搜索控件
    var size = new BMap.Size(10, 20)
    var city = new BMap.CityListControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
      offset: size
    })
    this.map.addControl(city)
    // 更改中心城市
    function changeCenterCity (cityName) {
	    this.map.centerAndZoom(cityName, 13)
    }
    // 实例化鼠标绘制工具
    this.drawingManager = new BMapLib.DrawingManager(this.map, {
      isOpen: false, // 是否开启绘制模式
      enableDrawingTool: true, // 是否显示工具栏
      drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
        offset: new BMap.Size(5, 5), // 偏离值
        drawingModes: [ // 可见的操作选项
          // BMAP_DRAWING_MARKER,
          BMAP_DRAWING_CIRCLE,
          // BMAP_DRAWING_POLYLINE,
          BMAP_DRAWING_POLYGON,
          BMAP_DRAWING_RECTANGLE
        ]
      },
      circleOptions: styleOptions, // 圆的样式
      polylineOptions: styleOptions, // 线的样式
      polygonOptions: styleOptions, // 多边形的样式
      rectangleOptions: styleOptions // 矩形的样式
    })
    // 添加鼠标绘制工具监听事件，用于获取绘制结果
    this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete)
    // this.begin();
    // console.log('5121212121')
  },

  methods: {
	  finalCityHandler () {
	      this.map.removeEventListener('tilesloaded', this.finalCityHandler)
	      // 定义中心城市
	      if ('杭州' !== '') {
	          this.map.centerAndZoom('杭州', 13)
	      }
	  },
	  // 更改中心城市
	  changeCenterCity (cityName) {
	      this.map.centerAndZoom(cityName, 13)
	  },
    clearAll () {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i])
      }
      this.overlays.length = 0
    },
    // 提交方法
	 allGps () {
      if (this.overlays.length == 0) {
        alert('未选择任何区域')
        return
      }
      var points = []// 区域数组
      var datas = {
        type: '',
        data: ''
      }
      for (var a = 0; a < this.overlays.length; a++) {
        // var type=overlays[a].wQ;
        // var type=Object.getPrototypeOf(overlays[a]).wQ;
        // if(type=='Circle'){
        if (this.overlays[a].point instanceof Object) {
          // var str="circle:"+this.overlays[a].getCenter().lng+"_"+this.overlays[a].getCenter().lat+"_"+this.overlays[a].getRadius();
          datas = {
            id: this.id,
            type: 0,
            data: this.overlays[a].getCenter().lng + '_' + this.overlays[a].getCenter().lat + '_' + this.overlays[a].getRadius()
          }
        } else {
          var ov = this.overlays[a].getPath()// 单个覆盖物
	    		var str = 'polygon:'
          var sum = ''
	    		for (var t = 0; t < ov.length; t++) {
	    			// 循环添加各定点的横纵坐标
	    			if (t == (ov.length - 1)) {
	    				// str+=ov[t].lng+"_"+ov[t].lat;
              sum += ov[t].lng + '_' + ov[t].lat
	    			} else {
	    				// str+=ov[t].lng+"_"+ov[t].lat+";";
              sum += ov[t].lng + '_' + ov[t].lat + ';'
	    			}
          }
          datas = {
            id: this.id,
            type: 1,
            data: sum
          }
        }
        // console.log(datas)
        points.push(str)// 将坐标系添加到区域数组
      }
      // alert(points);
      // this.uploadPoint(points);//上传区域坐标系
      this.uploadPoint(datas)// 上传区域坐标系
    },
    uploadPoint (datas) {
      const that = this
      CoCompanyApi.update(
		  that.id,
		  datas
      )
		  .then(res => {
          // console.log(res)
		    if (!res.code) {
		      that.$Notice.success({
		        title: '保存成功!'
		      })
		    } else {
		      that.$Notice.error({
		        title: res.message
		      })
		    }
		  })
		  .catch(error => {
		    Message.error(error)
		  })
    },
    overlaycomplete (e) {
      this.overlays.push(e.overlay)
    },

    // 右键菜单
    getMenu (rectangle) {
      var markerMenu = new BMap.ContextMenu()
      markerMenu.addItem(new BMap.MenuItem('删除区域', this.removeMarker.bind(rectangle)))// 为菜单绑定事件
      markerMenu.addItem(new BMap.MenuItem('开始编辑', this.beginEdit.bind(rectangle)))// 为菜单绑定事件
      markerMenu.addItem(new BMap.MenuItem('结束编辑', this.endEdit.bind(rectangle)))// 为菜单绑定事件
      return markerMenu
    },
    // --------------------------右键菜单方法---------------------------
    // 删除动作方法
    removeMarker (e, ee, marker) {
      this.map.removeOverlay(marker)// 地图删除覆盖物
      this.delPoint(this.overlays, marker)// 覆盖物列表删除此覆盖物
    },
    // 坐标检测方法
    checkMarker (e, ee, marker) {
      var lon = marker.getPosition().lng
      var lat = marker.getPosition().lat
      checkPointIn(lon, lat)
    },
    // 开启多边形编辑
    beginEdit (e, ee, marker) {
      marker.enableEditing()
    },
    // 关闭多边形编辑
    endEdit (e, ee, marker) {
      if (marker.point instanceof Object) {
        var r = marker.getRadius()
	         if (r > 1000 * 10) {
	        	 alert('半径不能超过10千米')
	        	 return
	         }
      } else {
        var tops = marker.getPath().length
	    	if (tops > 30) { // 多边形边数限制
	    		alert('多边形最大不能超过30条边!')
	    		return
	    	}
      }

      marker.disableEditing()
    },
    // 删除单个覆盖物
    delPoint (arr, val) {
      for (var i = 0; i < arr.length; i++) {
		    if (arr[i] == val) {
		      arr.splice(i, 1)
		      break
		    }
      }
    },
    // 为覆盖物绑定方法
    overlaycomplete (e) {
      var p = e.drawingMode// 获取覆盖物的属性
	    if (this.overlays.length == 1) {
	    	   alert('最只能添加1个区域!')
	           this.map.removeOverlay(e.overlay)
	           return
	    }
      if (p == 'marker') { // 是否是点
        var markerMenu = new BMap.ContextMenu()// 生成右键菜单
        markerMenu.addItem(new BMap.MenuItem('检测此点坐标', this.checkMarker.bind(e.overlay)))// 为菜单绑定事件
        markerMenu.addItem(new BMap.MenuItem('删除', this.removeMarker.bind(e.overlay)))// 为菜单绑定事件
        e.overlay.addContextMenu(markerMenu)// 覆盖物绑定菜单
      } else if (p == 'circle') { // 圆
	         var r = e.overlay.getRadius()
	         if (r > 1000 * 10) {
	        	 alert('半径不能超过10千米')
	        	 this.map.removeOverlay(e.overlay)
	        	 return
	         } else if (r < 5) { // 半径小于5米认为图形无效
	             this.map.removeOverlay(e.overlay)
	             return
	         }
        this.overlays.push(e.overlay)// 覆盖物列表添加覆盖物
        // 添加右键菜单
        e.overlay.addContextMenu(this.getMenu(e.overlay))// 覆盖物绑定菜单
      } else if (p == 'rectangle') { // 矩形
        // 如果两点重合则视为无效
        if (JSON.stringify(e.overlay.getPath()[0]) == JSON.stringify(e.overlay.getPath()[1])) {
	            this.map.removeOverlay(e.overlay)
	            return
        }
	        this.overlays.push(e.overlay)// 覆盖物列表添加覆盖物
	        // 添加右键菜单
	        e.overlay.addContextMenu(this.getMenu(e.overlay))// 覆盖物绑定菜单
      } else { // 多边形
        if (e.overlay.getPath().length > 30) { // 多边形边数限制
          alert('多边形最大不能超过30条边!')
	    		this.map.removeOverlay(e.overlay)
	    		return
	    	} else if (e.overlay.getPath().length < 3) {
	            this.map.removeOverlay(e.overlay)
	            return
	    	}
        this.overlays.push(e.overlay)// 覆盖物列表添加覆盖物
        // 添加右键菜单
        e.overlay.addContextMenu(this.getMenu(e.overlay))// 覆盖物绑定菜单
      }
    },
    al () {
      if (this.overlays.length != 0) {
        // console.log(this.overlays[0]);
        let obj = this.overlays[0]
        // 获取每个点的信息
        let points = obj.Qn
        // console.log(points);
      }
      alert(this.overlays.length)
    }

  },
  watch: {
	  routerData (newValue, oldValue) {
		 // var pointString=this.routerData.type+':'+this.routerData.pointStrings
		  // console.log(newValue.pointStrings)
		  // this.begin();
		  this.id = newValue.id
		  var pointString = ''
		  if (newValue.type == 0) {
			  pointString = 'circle:' + newValue.pointStrings
		  } else if (newValue.type == 1) {
			  pointString = 'polygon:' + newValue.pointStrings
		  } else {

		  }

		  var styleOptions = {
		      strokeColor: 'red', // 边线颜色。
		      fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
		      strokeWeight: 3, // 边线的宽度，以像素为单位。
		      strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
		      fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
		      strokeStyle: 'solid' // 边线的样式，solid或dashed。
		  }
		  if (pointString) {
		  	// var pointList=eval("(" + pointString + ")");//转换
		  	var pointList = pointString.split(',')
		  	if (pointList.length > 0) { // 列表不为空
		  		for (var a = 0; a < pointList.length; a++) {
		  			var points = pointList[a]// 单个区域
		  			var rectangle
		  			if (points.indexOf('circle') > -1) {
		  				var circle = points.split(':')[1]
		  				var p = circle.split('_')
		  				var point = new BMap.Point(p[0], p[1])
		  				rectangle = new BMap.Circle(point, p[2], styleOptions)
		  			} else {
		          		var point = points.split(':')[1].split(';')// 坐标系
		          		var markers = []
		          		for (var b = 0; b < point.length; b++) {
		          			var gps = point[b].split('_')// 单个坐标
		          			markers.push(new BMap.Point(gps[0], gps[1]))// 生成坐标点
		          		}
		          		rectangle = new BMap.Polygon(markers, styleOptions) // 创建矩形
		  			}
		  			// 添加右键菜单
		      		rectangle.addContextMenu(this.getMenu(rectangle))
		      		// 地图添加矩形
		        		this.map.addOverlay(rectangle)
		        		// 覆盖物列表添加此覆盖物
		        		this.overlays.push(rectangle)
		      	}
		  	}
		  }
		  // console.log(this.routerData.type)
	  }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#dbmap, #hello {
  width: 100%;
  height: 98%;
}
dl,dt,dd,ul,li {
  margin:0;
  padding:0;
  list-style:none;
}
p {
    font-size:12px;
}
dt {
  font-size:14px;
  font-family:"微软雅黑";
  font-weight:bold;
  border-bottom:1px dotted #000;
  padding:5px 0 5px 5px;
  margin:5px 0;
}
dd {
  padding:5px 0 0 5px;
}
li {
  line-height:28px;
}
</style>
